<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
	<style>
		html,body{
			font-family: "微软雅黑";
			width: 100%;
			height: 100%;
		}
		h1 {
			text-align: center;
			color: #333;
			font-size: 20px;
		}
		section {
			width: 100%;
		}
		section textarea{
			width: 96%;
			height: 20vw;
		}
		section div{
			width: 100%;
		}
	</style>
</head>

<body>
	<h1>圣教序书法集字字典</h1>
	<section>
		<textarea id="area"></textarea>
		<button onclick="convert1()">转换</button>
		<div id="show"></div>
	</section>

	<script>
		function convert1() {
			let area = document.getElementById("area").value;
			let str = '';
			for (let i = 0; i < area.length; i++) {
				str += '<img alt="' + area.charAt(i) + '" title="' + area.charAt(i) + '" src="img/' + area.charAt(i) + '.png" style="width:33vw;heigth:33vw;"/>';
			}
			document.getElementById("show").innerHTML = str;
		}
	</script>
</body>

</html>